<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title><%= yield(:page_title) %></title>

  <!-- guides styles -->
  <link rel="stylesheet" type="text/css" href="stylesheets/style.css" />
  <link rel="stylesheet" type="text/css" href="stylesheets/print.css" media="print" />
  <link rel="stylesheet" type="text/css" href="stylesheets/strobe.css" />
  <link rel="stylesheet" type="text/css" href="stylesheets/overrides.style.css" />
  <link rel="stylesheet" type="text/css" href="stylesheets/overrides.print.css" media="print" />
  <!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

  <!-- syntax highlighting styles -->
  <link rel="stylesheet" type="text/css" href="stylesheets/syntaxhighlighter/shCore.css" />
  <link rel="stylesheet" type="text/css" href="stylesheets/shThemeStrobeGuides.css" />
</head>
<body class="guide">
  <% if @edge %>
  <div><img src="images/edge_badge.png" alt="edge-badge" id="edge-badge" /></div>
  <% end %>

  <header role="banner">
    <div class="container">
      <h1 id="logo">
        <a href="http://aloha-editor.org"><img src="images/header/logo.png" height="50" alt="Aloha Editor" /></a>
      </h1>
      <nav role="navigation">
        <ul>
			<li><a href="https://www.gentics.com/genticscms/software_alohaeditor.de.html" title="A shortcut for Aloha Editor features" class="new">Features</a></li>
      <li class="active"><a href="http://aloha-editor.org/guides/" title="The Aloha Editor documentation">Guides</a></li>
			<li><a href="https://rawgit.com/alohaeditor/Aloha-Editor/hotfix/src/demo/boilerplate/" title="Feel the Aloha">Try it</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <div id="feature">
    <div class="wrapper">
      <div class="feature_header">
      <% if page_header = yield(:page_header).presence %>
        <%= page_header %>
      <% else %>
        <a href="/"><img src="images/strobe/guides.png"></a>
        <h2><a href="/"><%= Guides.meta["title"] %></a></h2>
        <p><%= Guides.meta["description"] %></p>
      <% end %>
      </div>
      <div class="feature_sidebar">
        <a href="index.html" id="guidesMenu">
          Guides Index <span id="guidesArrow">&#9656;</span>
        </a>
        <div id="guides" class="clearfix" style="display: none;">
          <a href="index.html" class="guidesMenu">
            Guides Index <span class="guidesArrow">&#9662;</span>
          </a>
          <hr style="clear:both;">
          <%= clickable_index %>
        </div>
      </div>
    </div>
  </div>

  <div id="container">
    <div class="wrapper">
      <div id="mainCol">
        <% if header_section = yield(:header_section).presence %>
          <div class="headerSection">
            <%= header_section %>
          </div>
        <% end %>
        <%= yield %>
      </div>
      <% if index_items = yield(:index_items).presence %>
        <div id="subCol">
          <h3 class="chapter"><img src="images/strobe/chapters.png" alt="" />Chapters</h3>
          <ol class="chapters">
            <%= index_items %>
          </ol>
        </div>
      <% else %>
      <div id="subCol">
        <%= yield(:sidebar) %>
      </div>
      <% end %>
    </div>
  </div>

  <hr class="hide" />
	  <footer>
	    <div class="container">
	      <div class="col">
	        <a href="index.html"><img src="images/footer/logo.png" alt="Aloha Editor" /></a>
	        <p>
	        	Templates based on <a href="https://github.com/sproutcore/sproutguides">SproutCore guides</a>.
	        </p>
	      </div>
	      <a href="#feature" class="top">Back To Top</a>
	    </div>
	  </footer>

  <script src="http://code.jquery.com/jquery-1.6.min.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript" src="javascripts/alohaEditorGuides.js"></script>
  <script type="text/javascript" src="javascripts/syntaxhighlighter/shCore.js"></script>
  <script type="text/javascript" src="javascripts/syntaxhighlighter/shBrushRuby.js"></script>
  <script type="text/javascript" src="javascripts/syntaxhighlighter/shBrushJScript.js"></script>
  <script type="text/javascript" src="javascripts/syntaxhighlighter/shBrushCss.js"></script>
  <script type="text/javascript" src="javascripts/syntaxhighlighter/shBrushXml.js"></script>
  <script type="text/javascript" src="javascripts/syntaxhighlighter/shBrushSql.js"></script>
  <script type="text/javascript" src="javascripts/syntaxhighlighter/shBrushPlain.js"></script>
  <script type="text/javascript">
    SyntaxHighlighter.all()
  </script>
</body>
</html>
